<!--
 * @Descripttion: GOGOGO
 * @version: 1.0.0
 * @Author: XJM
 * @Date: 2022-08-15 10:24:55
 * @LastEditors: XJM
 * @LastEditTime: 2022-08-22 21:44:19
-->
<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 白色内容区域 -->
        <div class="page_content">
            <el-button type="primary" @click="dialogTableVisible = true">新建角色</el-button>
            <!-- 角色数据 -->
            <el-table :data="rolesList" stripe style="width: 100%">
                <el-table-column prop="roleName" label="角色名" width="180" />
                <el-table-column prop="roleDesc" label="角色描述" width="180" />
                <el-table-column label="操作">
                    <template #default="scope" class="addsure">
                        <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新建角色弹窗 -->
        <el-dialog v-model="dialogTableVisible" :title="formData.id ? '编辑角色' : '添加新角色'" @close="clearForm">
            <!--表单-->
            <el-form ref="userForm" :model="formData" :rules="rules">
                <el-form-item label="角色名称:" prop="roleName">
                    <el-input v-model="formData.roleName" placeholder="请输入角色名称" />
                </el-form-item>
                <el-form-item label="角色描述:" prop="roleDesc">
                    <el-input v-model="formData.roleDesc" placeholder="请输入角色描述" />
                </el-form-item>
            </el-form>
            <!-- 按钮 -->
            <template #footer>
                <div class="flex addsure">
                    <el-button @click="dialogTableVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(userForm)">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<script>
import { getRolesApi, addRolesApi, editRolesApi, deleteRolesApi } from '@/util/request.js'
import { ElMessage } from 'element-plus';
import { reactive, toRefs, ref } from 'vue';


export default {
    name: "roles",
    setup() {
        const data = reactive({
            rolesList: [],
            dialogTableVisible: false,
            dialogVisible: false,
            formData: {
                id: "",
                roleName: "",
                roleDesc: ""
            },
            rules: {
                roleName: { required: true, message: '请输入角色名!', trigger: 'blur' }
            },
        })
        const getList = () => {
            getRolesApi().then(res => {
                data.rolesList = res.data
            })
        }
        // 提交新建角色弹窗表单数据
        const submitForm = (vali) => {
            vali.validate(res => {
                if (!res) {
                    return
                }
                // 验证通过
                if (data.formData.id) {
                    editRolesApi(data.formData).then(res => {
                        if (res.data) {
                            getList()
                            data.dialogTableVisible = false
                            ElMessage.success("编辑完成!")
                        }
                    })

                } else {
                    addRolesApi(data.formData).then(res => {
                        if (res.data) {
                            getList()
                            data.dialogTableVisible = false
                            ElMessage.success("添加成功!")
                        }
                    })
                }

            })
        }
        // 编辑
        const editRow = (row) => {
            data.dialogTableVisible = true
            const { roleName, roleDesc, id } = row
            data.formData = {
                id,
                roleName,
                roleDesc
            }
        }
        // 删除
        const deleteRow = (row) => {
            ElMessageBox.confirm(
                '你确定删除吗?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    deleteRolesApi(row).then(res => {
                        getList()
                        ElMessage({
                            type: 'success',
                            message: '删除成功!',
                        })
                    })
                }).catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除!',
                    })
                })
        }

        // 清空表单
        const clearForm = () => {
            data.formData = {
                roleName: "",
                roleDesc: ""
            }
        }
        // 方法初始化
        getList()
        const userForm = ref()
        return {
            ...toRefs(data),
            editRow,
            deleteRow,
            submitForm,
            userForm,
            clearForm,
        }
    }
}
</script>

<style>
</style>